﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../plugins/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="layer,tab"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>

    <br />
    <br />

    <h4>5、屏幕高度-300px，屏幕高度为：<span class="clientWidth"></span>px</h4>
    <div style="border: 1px solid #ccc; ">
        <div class="rayui-tab" id="tab5">
            <div class="rayui-tab-title">
                <ul>
                    <li class="rayui-active" allow-close="false"><i class="ra ra-copy"></i><span>欢迎使用</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用111</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用222</span></li>
                </ul>
            </div>
            <div class="rayui-tab-content">
                <div class="rayui-tab-item rayui-active">
                    11111
                </div>
                <div class="rayui-tab-item">
                    2222
                </div>
                <div class="rayui-tab-item">
                    3333
                </div>
            </div>
        </div>
    </div>

<h4>4、固定高度200px</h4>
    <div style="border: 1px solid #ccc; ">
        <div class="rayui-tab" id="tab4">
            <div class="rayui-tab-title">
                <ul>
                    <li class="rayui-active" allow-close="false"><i class="ra ra-copy"></i><span>欢迎使用</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用111</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用222</span></li>
                </ul>
            </div>
            <div class="rayui-tab-content">
                <div class="rayui-tab-item rayui-active">
                    11111
                </div>
                <div class="rayui-tab-item">
                    2222
                </div>
                <div class="rayui-tab-item">
                    3333
                </div>
            </div>
        </div>
    </div>

    <h4>
        3、默认无选项卡，外部控制
        <a class="rayui-btn" id="addFirst">添加内容</a>
        <a class="rayui-btn btn-primary" id="addSecond">添加链接</a>
        <a class="rayui-btn btn-success" id="insertToindex1">添加到第一个位置</a>
        <a class="rayui-btn btn-warning" id="swichlast">选中最后一个</a>
        <a class="rayui-btn btn-danger" id="swichmid">选中中间的那个</a>
    </h4>
    <div style="border: 1px solid #ccc; ">
        <div class="rayui-tab" id="tab3">
            <div class="rayui-tab-title">
            </div>
            <div class="rayui-tab-content">
            </div>
        </div>
    </div>

<h4>2、没有关闭按钮，有右键菜单</h4>
    <div style="border: 1px solid #ccc; ">
        <div class="rayui-tab" id="tab2">
            <div class="rayui-tab-title">
                <ul>
                    <li class="rayui-active" allow-close="false"><i class="ra ra-copy"></i><span>欢迎使用</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用111</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用222</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用333</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用444</span></li>
                </ul>
            </div>
            <div class="rayui-tab-content">
                <div class="rayui-tab-item rayui-active">
                    11111
                </div>
                <div class="rayui-tab-item">
                    2222
                </div>
                <div class="rayui-tab-item">
                    3333
                </div>
                <div class="rayui-tab-item">
                    4444
                </div>
                <div class="rayui-tab-item">
                    5555
                </div>
            </div>
        </div>
    </div>

    <h4>1、普通tab</h4>
    <div style="border: 1px solid #ccc; ">
        <div class="rayui-tab" id="tab1">
            <div class="rayui-tab-title">
                <ul>
                    <li class="rayui-active" allow-close="false"><i class="ra ra-copy"></i><span>欢迎使用</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用111</span></li>
                    <li><i class="ra ra-copy"></i><span>欢迎使用222</span></li>
                </ul>
            </div>
            <div class="rayui-tab-content">
                <div class="rayui-tab-item rayui-active">
                    11111
                </div>
                <div class="rayui-tab-item">
                    2222
                </div>
                <div class="rayui-tab-item">
                    3333
                </div>
            </div>
        </div>
    </div>


    <script>
        rayui.ready(function () {

            var tab = rayui.tab,
                layer = rayui.layer;

            $('.clientWidth').html($(window).height());
            
            function init5() {
                tab.render({
                    elem: "#tab5",
                    height: "full-300"
                });
            }

            function init4() {
                tab.render({
                    elem: "#tab4",
                    height: 200
                });
            }

            function init3() {
                var tabIns = tab.render({
                    elem: $("#tab3"),
                    contextMenu: true
                });

                $("#addFirst").click(function () {
                    tabIns.add({
                        id: new Date().getTime(),
                        icon: "ra-file",
                        allowClose: false,
                        title: "欢迎访问",
                        content: '<h3>欢迎访问</h3><script>alert("弹窗就错了");<\/script>'
                    });
                });
                $("#addSecond").click(function () {
                    tabIns.add({
                        id: new Date().getTime(),
                        icon: "fa-bell-slash-o",
                        title: "rayui首页",
                        url: '../index.html'
                    });
                });

                $("#insertToindex1").click(function () {
                    tabIns.add({
                        id: new Date().getTime(),
                        icon: "../images/1.png",
                        title: "插入到第一个位置",
                        content: '我抢占了第一个位置'
                    }, 1);
                });

                $("#swichlast").click(function () {
                    tabIns.swich($("#tab3").find('.rayui-tab-title>ul>li:last').attr('ray-id'));
                });

                $("#swichmid").click(function () {
                    var count = $("#tab3").find('.rayui-tab-title>ul>li').length;
                    var mid = Math.floor(count / 2);
                    tabIns.swich($("#tab3").find('.rayui-tab-title>ul>li:eq(' + mid + ')').attr('ray-id'));
                });

            }
            function init2() {
                tab.render({
                    elem: $("#tab2"),
                    closeBtn: false,
                    contextMenu: true
                });
            }

            function init1() {
                tab.render("#tab1");
            }


            init1();
            init2();
            init3();
            init4();
            init5();

        })

    </script>


    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

tab属性option：
elem: rayui-tab对象
fieldId: "id", //数据列
fieldName: "name", //显示列
fieldIcon: "icon", //图标
fieldUrl: "url", //图标
fieldContent: "content", //内容
height: 高度，可选数值|full-固定数值|sel-下方选择器-固定数值
closeBtn: true, //是否包含删除按钮
autoRefresh: true,//选中选项卡时自动刷新
contextMenu: false,//右键菜单，true|false
loading: true//true|false
showLoadingFunc: function(),//iframe加载等待显示函数
hideLoadingFunc: function(),//iframe加载等待关闭函数，配合showLoadingFunc使用可实现iframe加载中等待
                                            和iframe内容初始化加载中合并为一个


tabIns方法：
add: function (data, index)，添加tab选项卡，data为json格式，包含id、title、icon、url、content，allowClose(是否允许关闭)
                                            其中icon为图标，支持fa开头、ra开头、img的src，url为iframe显示，content为html显示。
                                            index为插入位置，从0开始，数据参数可以通过属性field*进行修改
del: function(id, toid), 删除选项卡，id为删除选项卡的id，toid为删除后将要选中的id。toid可为undefined|true|id编号，
                                 undefined时只删除不选中，true时删除自动附近选中，id编号，删除后选中指定选项卡
swich: function(id)，选择选项卡，id为带选择的选项卡id
moveToCurr: function()，移动选项卡至中间，选项卡过多可以所有拖拽移动，该函数实现把选中的选项卡移动到中间可视范围内


</pre>

</body>
</html>